<template>
    <div style="height:100%">
        <el-row style="height:950px;background:#1AA094;">
           <el-col :lg="16" :md="12" class="col_left">
              <h1>后台管理系统</h1>
              <span>技术支持:布道师小羊</span>
           </el-col>
           <el-col :lg="8" :md="12" class="col_right">
              <h1>登录</h1>
              <el-form class="login-form"
                ref="ruleFormRefLogin"
                :model="ruleFormLogin"
                :rules="rulesLogin">
                 <el-form-item prop="userName">
                    <el-input placeholder="请输入用户名" v-model="ruleFormLogin.userName">
                        <template #prefix>
                            <el-icon>
                                <UserFilled/>
                            </el-icon>
                        </template>
                    </el-input>
                 </el-form-item>
                 <el-form-item prop="userPassword" >
                    <el-input placeholder="请输入密码" v-model="ruleFormLogin.userPassword">
                        <template #prefix>
                            <el-icon>
                                <Lock/>
                            </el-icon>
                        </template>
                    </el-input>
                 </el-form-item>
              </el-form>
              <el-button @click="loginHandle" :loading="loading">登录</el-button>
           </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { UserFilled, Lock } from '@element-plus/icons-vue'
import {ref,reactive} from 'vue'
import {login,getUserInfo} from '@/api/login'
import {ElMessage}from 'element-plus'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'

const router=useRouter()
const store=useStore()
// 获取el-form表单DOM元素
const ruleFormRefLogin=ref(null)
// 定义用户名和密码
const ruleFormLogin=reactive({
    userName:'',
    userPassword:''
})
// 定义用户名和密码的验证规则
const rulesLogin={
    userName:[
        {required:true,message:'请输入用户名',trigger:'blur'},
        {min:4,max:15,message:'长度应为4~15位',trigger:'blur'}
    ],
    userPassword:[
        {required:true,message:'请输入密码',trigger:'blur'},
        {min:4,max:15,message:'长度应为4~15位',trigger:'blur'}
    ]
}

const loading=ref(false)
// 登录
const loginHandle=()=>{
   // 校验整个form表单
   ruleFormRefLogin.value.validate(async isValid=>{
    try {
        if(!isValid){
       return
    }
    loading.value=true
    // 调用登录api
    const res=await login(ruleFormLogin)
    console.log(res)
    if(res.code!==200){
       // 登录失败提示
       return ElMessage.error(res.message)
    }

    ElMessage({
        message:res.message,
        type:'success'
    })
    // token本地存储
    window.sessionStorage.setItem("token",res.data);
    // 调用getUserInfo方法
    /*
     const result=await getUserInfo()
    if(!result.data||result.code!==200){
        return ElMessage.error('获取管理员失败')
    }
    // 获取管理员信息成功，调用Vuex方法
    store.commit('setUser',result.data)
    */
   
    // 跳转到首页
    router.push('/home')
    } catch (error) {
        console.log(error)
    }finally{
        // 接口调用完成，将loading的值设置成false
        loading.value=false
    }
   });
}
</script>

<style lang="less" scoped>
.col_left{
    color:#fff;
    display: flex;
    /*
    垂直居中
    */
    align-items: center;
    /*水平居中*/
    justify-content: center;
    /*将flex方向修改成垂直方向*/
    flex-direction: column;
}
.col_right{
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .login-form{
        width: 240px;
    }
}
.el-button{
    width: 240px;
    background: #1AA094;
}
</style>
